<template>
  <div class="content-wrapper">
    <!-- <AudioVue theUrl="https://lht.ah-zk.com/qjt/fs/file/download//25E/25E29F2D4AA10082AA4C4B5DE72A965CE7F83983.mp3" /> -->
    <el-row class="content-row">
      <!-- <el-col class="height-init cityTree" :span="3">
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col> -->
      <el-col class="height-init" :span="24">
        <div class="container">
          <el-row class="headInfo" v-if="postInfo.position!=='9'" ref="headInfo">
            <el-row>
              <el-col :span="15">
                <span>发帖用户：{{postInfo.userName}}</span>
                <!-- <span class="bule">{{subject.subject}}</span> -->
              </el-col>
              <el-col :span="9">
                <span>发帖时间：</span>
                <span class="bule">{{renderTime(postInfo.issueTime)}}</span>
              </el-col>
            </el-row>
            <el-row>
              <span class="mr25">点赞{{postInfo.likeNum}}次</span>
              <span class="mr25">评论{{postInfo.commentNum}}次</span>
              <span class="mr25">转发{{postInfo.relayNum}}次</span>
            </el-row>
            <el-row>
              <span>发帖内容：</span>
            </el-row>
            <el-row>
              <el-col :span="12">
                <pre class="bule">{{postInfo.content}}</pre>
              </el-col>
              <el-col :span="12">
                <div v-if="postInfo.type === 2" >
                    <span v-for="(img,i) in splitImages(postInfo.files)" :key="i+1">
                        <img style="width:90px;height:90px;margin-right:3px;margin-bottom:3px"  :src="imageHttpUrl+img" />
                    </span>
                </div>
                <div v-if="postInfo.type === 3" >
                    <AudioVue :theUrl="mediaHttpUrl+postInfo.files" :showMaxTime="true" />
                </div>
                <div v-if="postInfo.type === 4" >
                    <!-- <img style="width:90px;height:90px;margin-right:3px;margin-bottom:3px"  :src="postInfo.media" /> -->
                    <video-player  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :playsinline="true"
                        :options="playerOptions"
                      ></video-player>
                </div>
              </el-col>
            </el-row>
          </el-row>

          <el-row class="headInfo" v-if="postInfo.position==='9'" ref="headInfo">
            <el-row>
              <el-col :span="15">
                <span>用户昵称：{{postInfo.userName}}</span>
              </el-col>
              <el-col :span="9">
                <span>发帖时间：</span>
                <span class="bule">{{renderTime(postInfo.issueTime)}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span>用户手机：{{postInfo.userPhone}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span>维权状态：</span>
                <span class="bule">
                  <el-radio-group v-model="postInfo.complaintStatus" @change="(val)=>complaintChange(val, postInfo.id)">
                    <el-radio :label="4">已通过</el-radio>
                    <el-radio :label="2">已回复</el-radio>
                    <el-radio :label="3">追踪报道</el-radio>
                    <el-radio :label="1">已解决</el-radio>
                    <el-radio :label="5">已下架</el-radio>
                  </el-radio-group>
                </span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span>投诉对象：{{postInfo.complaintObject}}</span>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <span>投诉标题：{{postInfo.title}}</span>
              </el-col>
            </el-row>
            <el-row>
              <span>投诉内容：</span>
            </el-row>
            <el-row>
              <el-col :span="24">
                <pre class="bule">{{postInfo.content}}</pre>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div v-if="postInfo.type === 2" >
                    <span v-for="(img,i) in splitImages(postInfo.files)" :key="i+1">
                        <img style="width:90px;height:90px;margin-right:3px;margin-bottom:3px"  :src="imageHttpUrl+img" />
                    </span>
                </div>
                <div v-if="postInfo.type === 3" >
                  <AudioVue :theUrl="mediaHttpUrl+postInfo.files" :showMaxTime="true" />
                </div>
                <div v-if="postInfo.type === 4" >
                  <video-player  class="video-player vjs-custom-skin"
                                 ref="videoPlayer"
                                 :playsinline="true"
                                 :options="playerOptions"
                  ></video-player>
                </div>
              </el-col>
            </el-row>
          </el-row>

          <el-row class="handle-box">
            <el-input v-model="query.content" class="handle-input mr10" placeholder="评论内容"/>
            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            <el-button type="primary" icon="el-icon-plus" class="handle-del" @click="addComment">新增</el-button>
          </el-row>

          <el-row class="list-table-row">
            <el-table
              :data="tableData"
              border
              class="table"
              ref="multipleTable"
              height="300"
              header-cell-class-name="table-header"
              @selection-change="handleSelectionChange"
            >
              <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
              <el-table-column type="index" width="50" align="center"></el-table-column>
              <el-table-column prop="userName" width="150" label="用户" show-overflow-tooltip>
                <template
                  slot-scope="scope"
                >{{scope.row.userPhone == null ? scope.row.userName : scope.row.userPhone+"("+scope.row.userName+")"}}</template>
              </el-table-column>
              <el-table-column prop="userType" width="150" label="身份" show-overflow-tooltip />

              <el-table-column prop="content" label="内容" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div
                    class="bule"
                    v-if="scope.row.relayUserName"
                  >{{"回复"+scope.row.relayUserName+"："+scope.row.relayContent}}</div>
                  <div>{{scope.row.content}}</div>
                </template>
              </el-table-column>

              <el-table-column label="状态" width="150" align="center">
                <template slot-scope="scope">{{status[scope.row.status+'']}}</template>
              </el-table-column>
              <el-table-column prop="createTime" width="150" label="时间" show-overflow-tooltip>
                <template slot-scope="scope">{{renderTime(scope.row.createTime)}}</template>
              </el-table-column>
              <el-table-column label="操作" width="240" align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="addComment(true,scope.row)">回复</el-button>
                  <el-button type="text" icon="el-icon-edit" @click="editComment(scope.row)">编辑</el-button>
                  <el-button
                    type="text"
                    v-if="scope.row.status === 1"
                    size="small"
                    @click="handleDown(scope.$index, scope.row)"
                  >下架</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row class="pagination-self">
            <el-pagination
              background
              layout="total, sizes, prev, pager, next"
              :current-page="query.pageNo"
              :page-size="query.pageSize"
              :total="pageTotal"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            ></el-pagination>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-dialog
      :title="dialogTitle"
      width="40%"
      :visible="addDialogVisible"
      :before-close="handleClose"
      :close-on-click-modal="false"
      append-to-body
    >
      <comment-add
        :postId="postId"
        :parent="parent"
        :comment="curComment"
        @handleClose="handleClose"
        @saveClose="saveClose"
      />
    </el-dialog>
  </div>
</template>

<script>
import { getCityTree } from "../../../../api/city";
import { fetchPageList, updateComment } from "../../../../api/bbs/comment";
import { getDetails,updatePost } from "../../../../api/bbs/post";
import AudioVue from "../../../../common/Audio";
import SvgIcon from "../../../../common/SvgIcon";
import CommentAdd from "./CommentAdd";

export default {
  name: "subjectList",
  props: {
    postId: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      playerOptions : {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "http://1255401106.vod2.myqcloud.com/36a3a91bvodcq1255401106/b5b58b395285890794971483722/playlist.m3u8" //url地址
        }],
        poster: "../../static/images/test.jpg", //你的封面地址
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按钮
        }
      },
      dialogTitle: "新增评论",
      postInfo: {},
      curComment: {},
      mediaHttpUrl: "https://lht.ah-zk.com/qjt/fs/file/download",
      imageHttpUrl: "https://lht.ah-zk.com/qjt/fs/origin/",
      parent: {},
      positions: {},
      status: {},
      addDialogVisible: false,
      query: {
        pageNo: 1,
        pageSize: 20,
        content:''
      },
      tableData: [],
      multipleSelection: [],
      pageTotal: 0,
      spaces: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "leaf"
      }
    };
  },
  activated() {
    this.pageInit();
  },
  created() {
    this.pageInit();
  },
  methods: {
    complaintChange(item,id){
      let name ="";
      let actionType ="";
      switch (item) {
        case 1:
          name = "已解决";
          actionType = "slove";
          break;
        case 2:
          name = "已回复";
          actionType = "reply";
          break;
        case 3:
          name = "跟踪报道";
          actionType = "follow";
          break;
        case 4:
          name = "已通过";
          actionType = "passed";
          break;
        case 5:
          name = "已下架";
          actionType = "putDown";
          break;
        default:
          name = "已通过";
          actionType = "passed";
      }
      this.$confirm('确定要将维权状态改为'+name+'？', '提示', {
        type: 'warning'
      }).then(() => {
        updatePost({id:id, actionType:actionType}).then(res => {
          if (res.code == '0') {
            this.$message.success('状态修改成功');
            this.pageInit();
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        });
      }).catch(() => {});
    },
    handleDown(index, row){
      // 二次确认下架
      this.$confirm('确定要下架吗？', '提示', {
        type: 'warning'
      }).then(() => {
        updateComment({id:row.id}).then(res => {
          if (res.code == '0') {
            this.$message.success('下架成功');
            this.handleSearch();
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            });
          }
        });
      }).catch(() => {});
    },
    splitImages(files) {
      if (files) {
        var filesArr = new Array();
        filesArr = files.split(",");
        return filesArr;
      }
      return [];
    },
    pageInit() {
      let that = this;
      that
        .enumMap("SubjectEnum.PositionEnum", "com.zlll.winner.enums.bbs")
        .then(res => {
          if (res) this.positions = res;
        });
      that
        .enumMap("CommentEnum.StatusEnum", "com.zlll.winner.enums.bbs")
        .then(res => {
          if (res) this.status = res;
        });
    //   that.fetchTreeData();
      that.fetchTableData();
      getDetails({ id: that.postId }).then(res => {
        that.postInfo = {};
        that.postInfo = res.data;
        // that.playerOptions.sources.src = that.mediaHttpUrl+that.postInfo.files;
              // console.log("that.playerOptions.sources.src===>",that.playerOptions.sources.src)

      });
    },
    saveClose() {
      let that = this;
      that.addDialogVisible = !that.addDialogVisible;
      that.curComment = {};
      that.parent = {};
      that.fetchTableData();
    },
    handleClose(done) {
      let that = this;
      that.addDialogVisible = !that.addDialogVisible;
      that.curComment = {};
      that.parent = {};
    },
    addComment(relay, row) {
      this.curComment = {};
      this.addDialogVisible = !this.addDialogVisible;
      if (relay) {
        this.dialogTitle = "回复评论";
        this.parent = row;
      } else {
        this.parent = {};
      }
    },
    editComment(row) {
      this.curComment = {};
      this.addDialogVisible = !this.addDialogVisible;
      this.dialogTitle = "编辑评论";
      this.curComment = row;
    },
    handleNodeClick(node) {
      console.log("handleNodeClick==>node:", node);
    },
    fetchTreeData() {
      let that = this;
      getCityTree().then(res => {
        that.treeData = res.data;
      });
    },
    //搜索条件方法
    handleSearch() {
      this.query.pageNo = 1;
      this.fetchTableData();
    },
    // 表格数据查询方法
    fetchTableData() {
      let that = this;
      if (that.postId) {
        that.query.postId = that.postId;
      }
      fetchPageList(that.query).then(res => {
        that.tableData = res.data.records;
        that.pageTotal = res.data.total;
      });
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 分页方法
    handlePageChange(val) {
      this.query.pageNo = val;
      this.fetchTableData();
    },
    // 分页大小改变方法
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.fetchTableData();
    }
  },
  components: { AudioVue, CommentAdd, SvgIcon },
  watch:{
        "$route":function(to,from){
            if(to.fullPath === this.$route.fullPath){
                this.pageInit();
            }
        }
    }
};
</script>

<style lang="stylus" scoped>
.headInfo {
  color: #606266;
  margin-bottom: 15px;
  font-size: 14px;

  span {
    padding-left: 10px;
    line-height: 30px;
  }

  pre {
    padding-left: 30px;
    line-height: 30px;
  }
}

.bule {
  color: #409EFF;
}

.content-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content-row {
    height: 100%;
    flex-grow: 1;
    display: flex;

    .list-table-row {
      height: 50%;
      flex-grow: 1;
      display: flex;
      flex-direction: column;

      .el-table {
        flex-grow: 1;
      }
    }
  }
}

.cityTree {
  overflow-y: scroll;
}

.height-init {
  height: 100%;
}

.container {
  height: 100%;
}

.handle-box {
  height: 6.5%;
}

.handle-input {
  width: 120px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr25 {
  margin-right: 25px;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.pagination-self {
  height: 10%;
  text-align: right;
  margin-top: 5px;
}
.vjs-icon-placeholder {
    width: 100%;
    height: 100%;
    display: block;
}
</style>
